/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
/**
 * @class Ext.ux.Spinner
 * @extends Ext.util.Observable
 * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
 */
Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
	incrementValue: 1,
	alternateIncrementValue: 5,
	triggerClass: 'x-form-spinner-trigger',
	splitterClass: 'x-form-spinner-splitter',
	alternateKey: Ext.EventObject.shiftKey,
	defaultValue: 0,
	accelerate: false,

	constructor: function(config){
		Ext.ux.Spinner.superclass.constructor.call(this, config);
		Ext.apply(this, config);
		this.mimicing = false;
	},

	init: function(field){
		this.field = field;

		field.afterMethod('onRender', this.doRender, this);
		field.afterMethod('onEnable', this.doEnable, this);
		field.afterMethod('onDisable', this.doDisable, this);
		field.afterMethod('afterRender', this.doAfterRender, this);
		field.afterMethod('onResize', this.doResize, this);
		field.afterMethod('onFocus', this.doFocus, this);
		field.beforeMethod('onDestroy', this.doDestroy, this);
	},

	doRender: function(ct, position){
		var el = this.el = this.field.getEl();
		var f = this.field;

		if (!f.wrap) {
			f.wrap = this.wrap = el.wrap({
				cls: "x-form-field-wrap"
			});
		}
		else {
			this.wrap = f.wrap.addClass('x-form-field-wrap');
		}

		this.trigger = this.wrap.createChild({
			tag: "img",
			src: Ext.BLANK_IMAGE_URL,
			cls: "x-form-trigger " + this.triggerClass
		});

		if (!f.width) {
			this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
		}

		this.splitter = this.wrap.createChild({
			tag: 'div',
			cls: this.splitterClass,
			style: 'width:13px; height:2px;'
		});
		this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();

		this.proxy = this.trigger.createProxy('', this.splitter, true);
		this.proxy.addClass("x-form-spinner-proxy");
		this.proxy.setStyle('left', '0px');
		this.proxy.setSize(14, 1);
		this.proxy.hide();
		this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
			dragElId: this.proxy.id
		});

		this.initTrigger();
		this.initSpinner();
	},

	doAfterRender: function(){
		var y;
		if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
			this.el.position();
			this.el.setY(y);
		}
	},

	doEnable: function(){
		if (this.wrap) {
			this.disabled = false;
			this.wrap.removeClass(this.field.disabledClass);
		}
	},

	doDisable: function(){
		if (this.wrap) {
			this.disabled = true;
			this.wrap.addClass(this.field.disabledClass);
			this.el.removeClass(this.field.disabledClass);
		}
	},

	doResize: function(w, h){
		if (typeof w == 'number') {
			this.el.setWidth(w - this.trigger.getWidth());
		}
		this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
	},

	doFocus: function(){
		if (!this.mimicing) {
			this.wrap.addClass('x-trigger-wrap-focus');
			this.mimicing = true;
			Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
				delay: 10
			});
			this.el.on('keydown', this.checkTab, this);
		}
	},

	// private
	checkTab: function(e){
		if (e.getKey() == e.TAB) {
			this.triggerBlur();
		}
	},

	// private
	mimicBlur: function(e){
		if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
			this.triggerBlur();
		}
	},

	// private
	triggerBlur: function(){
		this.mimicing = false;
		Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
		this.el.un("keydown", this.checkTab, this);
		this.field.beforeBlur();
		this.wrap.removeClass('x-trigger-wrap-focus');
		this.field.onBlur.call(this.field);
	},

	initTrigger: function(){
		this.trigger.addClassOnOver('x-form-trigger-over');
		this.trigger.addClassOnClick('x-form-trigger-click');
	},

	initSpinner: function(){
		this.field.addEvents({
			'spin': true,
			'spinup': true,
			'spindown': true
		});

		this.keyNav = new Ext.KeyNav(this.el, {
			"up": function(e){
				e.preventDefault();
				this.onSpinUp();
			},

			"down": function(e){
				e.preventDefault();
				this.onSpinDown();
			},

			"pageUp": function(e){
				e.preventDefault();
				this.onSpinUpAlternate();
			},

			"pageDown": function(e){
				e.preventDefault();
				this.onSpinDownAlternate();
			},

			scope: this
		});

		this.repeater = new Ext.util.ClickRepeater(this.trigger, {
			accelerate: this.accelerate
		});
		this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
			preventDefault: true
		});

		this.field.mon(this.trigger, {
			mouseover: this.onMouseOver,
			mouseout: this.onMouseOut,
			mousemove: this.onMouseMove,
			mousedown: this.onMouseDown,
			mouseup: this.onMouseUp,
			scope: this,
			preventDefault: true
		});

		this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);

		this.dd.setXConstraint(0, 0, 10);
		this.dd.setYConstraint(1500, 1500, 10);
		this.dd.endDrag = this.endDrag.createDelegate(this);
		this.dd.startDrag = this.startDrag.createDelegate(this);
		this.dd.onDrag = this.onDrag.createDelegate(this);
	},

	onMouseOver: function(){
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
		this.trigger.addClass(this.tmpHoverClass);
	},

	//private
	onMouseOut: function(){
		this.trigger.removeClass(this.tmpHoverClass);
	},

	//private
	onMouseMove: function(){
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
		((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
		}
	},

	//private
	onMouseDown: function(){
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
		this.trigger.addClass(this.tmpClickClass);
	},

	//private
	onMouseUp: function(){
		this.trigger.removeClass(this.tmpClickClass);
	},

	//private
	onTriggerClick: function(){
		if (this.disabled || this.el.dom.readOnly) {
			return;
		}
		var middle = this.getMiddle();
		var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
		this['onSpin' + ud]();
	},

	//private
	getMiddle: function(){
		var t = this.trigger.getTop();
		var h = this.trigger.getHeight();
		var middle = t + (h / 2);
		return middle;
	},

	//private
	//checks if control is allowed to spin
	isSpinnable: function(){
		if (this.disabled || this.el.dom.readOnly) {
			Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
			return false;
		}
		return true;
	},

	handleMouseWheel: function(e){
		//disable scrolling when not focused
		if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
			return;
		}

		var delta = e.getWheelDelta();
		if (delta > 0) {
			this.onSpinUp();
			e.stopEvent();
		} else {
			if (delta < 0) {
				this.onSpinDown();
				e.stopEvent();
			}
		}
	},

	//private
	startDrag: function(){
		this.proxy.show();
		this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
	},

	//private
	endDrag: function(){
		this.proxy.hide();
	},

	//private
	onDrag: function(){
		if (this.disabled) {
			return;
		}
		var y = Ext.fly(this.dd.getDragEl()).getTop();
		var ud = '';

		if (this._previousY > y) {
			ud = 'Up';
		} //up
		if (this._previousY < y) {
			ud = 'Down';
		} //down
		if (ud != '') {
			this['onSpin' + ud]();
		}

		this._previousY = y;
	},

	//private
	onSpinUp: function(){
		if (this.isSpinnable() == false) {
			return;
		}
		if (Ext.EventObject.shiftKey == true) {
			this.onSpinUpAlternate();
			return;
		}
		else {
			this.spin(false, false);
		}
		this.field.fireEvent("spin", this.field);
		this.field.fireEvent("spinup", this.field);
	},

	//private
	onSpinDown: function(){
		if (this.isSpinnable() == false) {
			return;
		}
		if (Ext.EventObject.shiftKey == true) {
			this.onSpinDownAlternate();
			return;
		}
		else {
			this.spin(true, false);
		}
		this.field.fireEvent("spin", this.field);
		this.field.fireEvent("spindown", this.field);
	},

	//private
	onSpinUpAlternate: function(){
		if (this.isSpinnable() == false) {
			return;
		}
		this.spin(false, true);
		this.field.fireEvent("spin", this);
		this.field.fireEvent("spinup", this);
	},

	//private
	onSpinDownAlternate: function(){
		if (this.isSpinnable() == false) {
			return;
		}
		this.spin(true, true);
		this.field.fireEvent("spin", this);
		this.field.fireEvent("spindown", this);
	},

	spin: function(down, alternate){
		var v = parseFloat(this.field.getValue());
		var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
		(down == true) ? v -= incr : v += incr;

		v = (isNaN(v)) ? this.defaultValue : v;
		v = this.fixBoundries(v);
		this.field.setRawValue(v);
	},

	fixBoundries: function(value){
		var v = value;

		if (this.field.minValue != undefined && v < this.field.minValue) {
			v = this.field.minValue;
		}
		if (this.field.maxValue != undefined && v > this.field.maxValue) {
			v = this.field.maxValue;
		}

		return this.fixPrecision(v);
	},

	// private
	fixPrecision: function(value){
		var nan = isNaN(value);
		if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
			return nan ? '' : value;
		}
		return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
	},

	doDestroy: function(){
		if (this.trigger) {
			this.trigger.remove();
		}
		if (this.wrap) {
			this.wrap.remove();
			delete this.field.wrap;
		}

		if (this.splitter) {
			this.splitter.remove();
		}

		if (this.dd) {
			this.dd.unreg();
			this.dd = null;
		}

		if (this.proxy) {
			this.proxy.remove();
		}

		if (this.repeater) {
			this.repeater.purgeListeners();
		}
		if (this.mimicing){
			Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
		}
	}
});

//backwards compat
Ext.form.Spinner = Ext.ux.Spinner;